<template>
  <div class="fixed inset-0 bg-pink-100/90 bg-opacity-50 flex items-center justify-center">
    <div class="bg-white p-8 rounded-3xl max-w-md border-4 border-pink-300">
      <h2 class="text-2xl font-bold mb-4 text-pink-600">添加自定义练习</h2>
      <form @submit.prevent="submitExercises">
        <div class="mb-4">
          <label for="exercises" class="block text-pink-700 mb-2">输入练习内容（每行一个）:</label>
          <textarea
            id="exercises"
            v-model="exercisesInput"
            rows="5"
            class="w-full p-2 border-2 border-pink-300 rounded-xl focus:outline-none focus:border-pink-500"
            placeholder="例如:&#10;123+456&#10;789-321&#10;55*12"
          ></textarea>
        </div>
        <div class="flex justify-between">
          <button
            type="button"
            @click="$emit('close')"
            class="bg-pink-200 hover:bg-pink-300 text-pink-800 px-6 py-2 rounded-full font-bold transition-colors"
          >
            取消
          </button>
          <button
            type="submit"
            class="bg-pink-400 hover:bg-pink-500 text-white px-6 py-2 rounded-full font-bold transition-colors"
          >
            添加
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const exercisesInput = ref('')

const submitExercises = () => {
  const newExercises = exercisesInput.value
    .split('\n')
    .map(exercise => exercise.trim())
    .filter(exercise => exercise !== '')

  if (newExercises.length > 0) {
    emit('submit', newExercises)
  } else {
    alert('请输入至少一个有效的练习内容！')
  }
}

const emit = defineEmits(['close', 'submit'])
</script>